<template>
	<view class="container">
		<uv-navbar title="店长微信" bg-color="none" @leftClick="leftClick"></uv-navbar>
		<template  v-if="!upLoading">
			<template v-if="!info.storeManagerWechat">
				<view class="wx-box" v-if="!upload_ewm" @click="uploadEwm">
					<image class="wx-box-image" src="/static/images/index/tu.png" mode="aspectFill"></image>
					<view class="text1">手机上传微信二维码</view>
					<view class="text2">支持png，jpg格式</view>
				</view>
			
				<view class="ewm" v-else>
					<image class="ewm-img" :src="upload_ewm" mode="aspectFill"></image>
				</view>
			</template>
			<view class="ewm" v-else>
				<image class="ewm-img" :src="info.storeManagerWechat" mode="aspectFill"></image>
			</view>
		</template>
		<view v-else class="wx-box">
			<image class="wx-box-image"
				src="http://jy-nfc.oss-cn-hangzhou.aliyuncs.com/2024/12/30/e44660bc8a8f4fe4a068dacb117a3958.png"
				mode="aspectFill"></image>
			<view class="text1">进度到达{{progress}}%</view>
			<view class="text2">正在上传中</view>
		</view>
		<view class="button-fb" @click="onSubmit">{{info.storeManagerWechat ? '重新上传' : '保存提交'}}</view>
		<uv-loading-page :loading="loading" loading-mode="semicircle" bgColor="rgba(0, 0, 0, 0.2)"></uv-loading-page>
	</view>
</template>

<script>
	const app = getApp();
	import {
		updateInfo,
	} from '@/common/api.js'
	export default {
		data() {
			return {
				upload_ewm: '',
				loading: false,
				upLoading: false,
			};
		},
		computed: {
			info() {
				return this.$store.state.user.wx_merchantInfo
			}
		},
		methods: {
			leftClick() {
				app.navigateBack()
			},
			uploadEwm() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.loading = true
						this.upLoading = true
						let tempFilePaths = res.tempFilePaths[0];
						app._uploadImage(tempFilePaths, null, (res) => {
							this.upload_ewm = res.url
							this.upLoading = false
						}, null, () => {
							this.loading = false
							this.upLoading = false
						})
					}
				})
			},
			onSubmit() {
				if (this.info.storeManagerWechat) {
					this.info.storeManagerWechat = ""
					this.upload_ewm = ""
					return false
				}
				if (!this.upload_ewm) {
					this.$toast('请上传二维码')
				} else {
					uni.showLoading({
						title: '上传中...'
					});
					updateInfo({
						storeManagerWechat: this.upload_ewm
					}).then((res) => {
						this.info.storeManagerWechat = this.upload_ewm
						uni.hideLoading();
						this.$toast('保存成功')
					}).catch(() => {
						uni.hideLoading();
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: hidden;
		min-height: 100vh;
		width: 100vw;
		padding: 40rpx;
		padding-top: 262rpx;
		// padding-bottom: calc(96rpx + 32rpx + 22rpx);
		box-sizing: border-box;
		background: radial-gradient(128% 128% at 95% 0%, #D7CEFF 0%, #BBE1FF 62%, #FFFFFF 95%);

		.button-fb {
			width: 480rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
			border-radius: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 60rpx;
		}

		.wx-box {
			min-height: 432rpx;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 32rpx;
			border: 2rpx solid #FFFFFF;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.wx-box-image {
				width: 290rpx;
				height: 160rpx;
			}

			.text1 {
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				line-height: 32rpx;
				text-align: center;
				margin-top: 34rpx;
				margin-bottom: 16rpx;
			}

			.text2 {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 32rpx;
				text-align: center;
			}
		}

		.ewm {
			width: 360rpx;
			height: 363rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;

			.ewm-img {
				width: 320rpx;
				height: 323rpx;
			}
		}
	}
</style>